// React事件中的this的指向问题

// 导入react和react-dom
import React from 'react';
import ReactDom from 'react-dom/client';

class Handler extends React.Component {
  state = {
    count: 100,
  };
  handlerClick = () => {
    // 箭头函数指向当前Handler组件
    // console.log('handlerClick----->', this);
  };
  handlerClick2() {
    // 指向的是undefined
    console.log('handlerClick2----->', this);
  }
  render() {
    console.log('render----->', this);
    return (
      <div>
        <button onClick={this.handlerClick}>点我访问count</button>
        {/* 默认指向undefined */}
        <button onClick={this.handlerClick2}>点我访问count</button>
        {/* bind可以修改this指向的问题 指向Handler */}
        {/* <button onClick={this.handlerClick2.bind(this)}>点我访问count</button> */}
      </div>
    );
  }
}
// 18版本以上新出的挂载方法
const root = ReactDom.createRoot(document.getElementById('root'));
root.render(<Handler></Handler>);
